<template>
  <div style="height: 100%">
    <div>
      父组件
      <button @click="dialogVisible = true">+新增</button>
    </div>
    <!-- <MyDialog v-model="dialogVisible"> -->
    <MyDialog :show.sync="dialogVisible">
      <template #title>
        <h1>我是标题</h1>
      </template>
      <div>
        <p>用户名：<input /></p>
        <p>密码：<input /></p>
      </div>
      <template #footer>
        <p>
          <button @click="dialogVisible = false">取消</button>&nbsp;
          <button @click="onSubmit">确定</button>
        </p>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue'
export default {
  components: {
    MyDialog
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    onSubmit () {
      // 提交
      this.dialogVisible = false
    }
  }
}
</script>
